<template>
	<view class="main">
		<u-navbar :is-back="true" title="订单详情" :background="background" :border-bottom="false" title-color="#fff"
			title-size="35rpx" title-bold="true" back-icon-color="#fff">
		</u-navbar>
		<view class="address">
			<view class="tit">合约地址：</view>
			<view>{{shopdetalis.goods_address}} </view>
		</view>
		<view class="shop">
			<view class="left">
				<image :src="shopdetalis.goods_img" mode=""></image>
			</view>
			<view class="right">
				<view class="shop_tit">
					{{shopdetalis.goods_title}}
				</view>
				<view class="company">
					<image :src="shopdetalis.issuer_img" mode=""></image>
					<text style="padding-left: 15rpx;">{{shopdetalis.issuer}}</text>
				</view>
				<view class="money">
					￥{{shopdetalis.goods_price}}
				</view>
			</view>
		</view>
		<view class="payment">
			<view class="where">
				<view class="pay_tit">
					支付方式
				</view>
				<view class="give">
					<image v-if="shopdetalis.pay_type_text=='微信支付'" src="../../../static/images/wx.png" mode=""></image>
					<image v-if="shopdetalis.pay_type_text=='支付宝支付'" src="../../../static/images/zfb.png" mode="">
					</image>
					<image v-if="shopdetalis.pay_type_text=='云闪付'" src="../../../static/images/ys.png" mode="">
					</image>
					<text>{{shopdetalis.pay_type_text}}</text>
				</view>
			</view>
		</view>

		<view class="order_info">
			<view class="order_tit">
				订单信息
			</view>
			<view class="info">
				订单编号：{{shopdetalis.order_no}}
			</view>
			<view class="info" v-if="status=='待支付'">
				创建时间：{{shopdetalis.create_time}}
			</view>
			<view class="info" v-if="status=='已取消'">
				关闭时间：{{shopdetalis.cancel_time}}
			</view>
			<view class="info" v-if="status=='已付款'">
				付款时间：{{shopdetalis.pay_time}}
			</view>
		</view>
		<view class="buy" v-if="status=='待支付'">
			<view class="money">
				<text @click="qx(shopdetalis.id)">取消订单</text>
			</view>
			<view class="button">
				<text>立即购买</text>
			</view>

		</view>
		<view class="buy" v-if="status=='已取消'">
			<view class="money" @click="remove(shopdetalis.id)">
				删除订单
			</view>
		</view>
		<view class="buy" v-if="status=='已付款'">
			<view class="money" style="margin-right: 20rpx;" @click="qx(shopdetalis.id)">
				取消订单
			</view>
			<view class="money" @click="remove(shopdetalis.id)">
				删除订单
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#111111',
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
				},
				show: false,
				shopdetalis: {},
				status: ''
			}
		},
		onLoad() {
			this.getinfo()
		},
		
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			remove(id) {
				
				global.$http.request({
					url: '/api/order/delOrder',
					data: {
						token: uni.getStorageSync('token'),
						order_id: id,
					},
				}).then(res => {
					console.log();
					var that = this
					if (res.data.code == 1) {
						console.log(res);
						setTimeout(function() {
							that.back()
						}, 200)
					}
				})
			},
			qx(id) {
				global.$http.request({
					url: '/api/order/cancelOrder',
					data: {
						token: uni.getStorageSync('token'),
						order_id: id,
					},
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '订单取消成功',
							icon: "none",
							mask: true,
							duration: 2000
						})
						console.log(res);
					}
				})
			},
			changehead() {
				this.show = !this.show
			},
			close() {
				this.show = !this.show
			},
			getinfo() {
				const that = this
				// #ifdef APP-NVUE
				const eventChannel = that.$scope.eventChannel; // 兼容APP-NVUE
				// #endif
				// #ifndef APP-NVUE
				const eventChannel = that.getOpenerEventChannel();
				// #endif
				eventChannel.on('details', function(data) {
					console.log(data.data)
					that.status = data.data.status
					that.type = data.data.type
					global.$http.request({
						url: '/api/order/orderDetail',
						data: {
							order_id: data.data.id,
							token: uni.getStorageSync('token')
						}
					}).then(res => {
						console.log(res);
						if (res.data.code == 0) {
							console.log(res.data.data);
							that.shopdetalis = res.data.data
						}
					})
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC-Regular, PingFang SC;
		background-color: #111111;
		width: 750rpx;

		.main {
			margin-top: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.address {
				padding: 32rpx 24rpx;
				width: 686rpx;
				background: #181818;
				border-radius: 32rpx;
				opacity: 1;

				.tit {
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					padding-bottom: 20rpx;

				}

				view {
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;


				}
			}

			.shop {
				margin: 24rpx 0;
				width: 686rpx;
				height: 248rpx;
				background: #181818;
				border-radius: 32rpx;
				opacity: 1;
				display: flex;
				padding: 24rpx;

				.left {
					width: 200rpx;
					border-radius: 32rpx;
					overflow: hidden;
					background-color: #19BE6B;
					height: 200rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}

				.right {
					padding-left: 24rpx;

					.shop_tit {

						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
					}

					.company {
						display: flex;
						align-items: center;
						font-size: 24rpx;

						font-weight: 400;
						color: #FFFFFF;
						opacity: 0.5;
						padding: 16rpx 0 60rpx 0;

						image {
							width: 36rpx;
							height: 36rpx;
						}
						
					}

					.money {
						font-size: 32rpx;

						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.payment {
				width: 686rpx;
				background: #181818;
				border-radius: 32rpx;
				opacity: 1;
				padding: 24rpx;

				.where {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.pay_tit {
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;
					}

					.give {
						display: flex;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
							margin-right: 16rpx;
						}

						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
					}

					.chose {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}

			.order_info {
				margin: 24rpx;
				width: 686rpx;

				background: #181818;
				border-radius: 32rpx;
				opacity: 1;
				padding: 32rpx 24rpx;

				.info {
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 44rpx;
					opacity: 0.8;

				}

				.order_tit {
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					padding-bottom: 24rpx;

				}
			}

			.buy {
				position: fixed;
				bottom: 0;
				width: 750rpx;
				background: #151515;
				box-shadow: 0rpx -1rpx 0rpx 2rpx rgba(0, 0, 0, 0.07);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding: 10rpx 32rpx;
				
				.money {

					font-size: 24rpx;
					padding: 12rpx 24rpx;
					font-weight: 400;
					color: #999999;
					border-radius: 30rpx;
					opacity: 1;
					border: 2rpx solid #999999;

					text {
						padding-right: 4rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;

					}

				}

				.button {
					margin-left: 24rpx;
					padding: 12rpx 24rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					background: #F3C860;
					border-radius: 30rpx;
					opacity: 1;

				}
			}
		}
	}
</style>
